<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JPetStore</title>
    <link rel="stylesheet" href="css/main.css">
    <style>
        @font-face {
            font-family: 'huayuan';
            src: url("font/花园肉丸.ttf");
        }

        @font-face {
            font-family: 'cm';
            src: url("font/Begilas.otf");
        }

        .top {
            z-index: 3;
            height: 70px;
            top: 0px;
            position: fixed;
            padding-top: 20px;
        }

        /* 改下颜色 */
        .trCorner li {
            color: rgb(190, 158, 111);;
        }

        /* 顶部导航颜色渐变 */
        @keyframes color_turn {
            from {
                background-color: #e9e4f0bb;
                color: rgb(190, 158, 111);
            }

            to {
                background-color: rgb(222, 186, 138);
                color: beige;
            }
        }

        .change_color {
            animation: color_turn 500ms ease 1 forwards;
        }

        /*搜索框渐变*/
        @keyframes color_turn2 {
            from {
                background-color: rgba(255, 255, 255, 0.8);
                color: black;
            }

            to {
                background-color: rgba(255, 255, 255, 1.0);
                color: black;
            }
        }

        .change_color2 {
            animation: color_turn2 500ms ease 1 forwards;
        }

        /* 左上角logo微调 */
        .tlCorner {
            opacity: 95%;
        }

        /* 顶部图片 */
        .topBg {
            width: 100%;
            height: 600px;
            margin: 0 auto;
            background-image: url(img/mainTopBg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        /* 搜索栏 */
        .searchBar {
            position: absolute;
            top: 26px;
            left: 30vw;
        }

        #searchInput {
            width: 408px;
            height: 28px;
            margin: 0 auto;
            border-radius: 40px;
            border: none;
            padding-left: 10px;
        }

        #searchSubmit {
            height: 27px;
            width: 27px;
            margin: 0 auto;
            background-image: url(img/searchIcon.png);
            background-repeat: no-repeat;
            background-size: contain;
            border: none;
            background-color:transparent;
            position: relative;
            top: 10px;
        }

        #auto{
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            margin-top: 10px;
        }

        #auto_out{
            padding-left: 6px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-family: cm;
            border-bottom: 2px solid gray;

        }

        #auto_out h2{
            margin: 0px;
        }

        .mainBox {
            width: 100%;
        }

        /* 宠物展示区 */
        .PetDisplay {
            width: 83vw;
            height: fit-content;
            background-color: #fff;
            position: relative;
            top: 30px;
            margin: 0 auto;
        }

        /* .PetDisplay-scroll{
          width: 81vw;
          height: fit-content;
          background-color: #fff;
          position: relative;
          top: 160px;
        } */

        #pickMeUp {
            font-size: 30px;
            position: relative;
            left: 20px;
            top: -10px;
            color: gray;
            font-family: cm, serif;
        }

        /* 宠物分类 */
        .petCategory {
            width: 90%;
            height: 104px;
            margin: 0 auto;
            position: relative;
            top: 30px;
            right: 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .petCategory ul {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            margin: 0 auto;

        }

        .petCategory li {
            width: 100px;
            margin: 0 auto;
            border-radius: 50%;
            list-style: none;
            border: solid 5px rgb(222, 186, 138);
            box-shadow: 4px 4px 15px rgba(182, 148, 102, 0.704);

        }

        .petCategory #cats {
            background-image: url(img/cat_category.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center 0;
            z-index: 2;
        }

        .petCategory #dogs {
            background-image: url(img/dog_category.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center 0;
            z-index: 2;
        }

        .petCategory #reptiles {
            background-image: url(img/reptiles_category.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center 0;
            z-index: 2;
        }

        .petCategory #birds {
            background-image: url(img/birds_category.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center 0;
            z-index: 2;
        }

        .petCategory #fish {
            background-image: url(img/fish_category.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center 0;
            z-index: 2;
        }

        /*悬浮显示*/
        #inform{
            background-color: rgba(222, 186, 138, 0.8);
            position: absolute;
            width: 220px;
            z-index: 2;
        }

        /* 宠物展示 */
        .AllPets {
            width: 100%;
            height: fit-content;
            margin: 0 auto;
            position: relative;
            top: 140px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            /*background-image: url(img/displayBG.jpg);*/
            background-color: #fff;
            /*background-repeat: no-repeat;*/
            /*background-size: cover;*/
            /*-webkit-background-size: cover;*/
            /*-o-background-size: cover;*/
            /*background-position: center -110px;*/
            /*overflow: hidden;*/
            /*background-attachment: fixed;*/
        }

        .item {
            position: relative;
            left: 20px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .AllPets li {
            width: 19%;
            height: 240px;
            padding: 20px;
            margin-bottom: 20px;
            margin-right: 20px;
            position: relative;
            left: 10px;
            background-color: #fcf8f3;
            /*opacity: 90%;*/
            border: solid 2px black;
            list-style: none;
            text-align: center;
            font-family: cm;
            box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .25);
        }

        .AllPets li:hover {
            box-shadow: 0px 0px 30px #ffde71;
            transition: all .2s ease-in-out;
        }

        .AllPets li p {
            margin: 0 auto;
        }

        .AllPets li h2 {
            font-size: 20px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 78%;
            transform: translate(-50%, -50%);
        }

        /*宠物展示中的详细按钮*/
        .item button {
            width: 60px;
            background-color: transparent;
            position: absolute;
            left: 50%;
            top: 88%;
            transform: translate(-50%, -50%);
            margin: 0 auto;
            bottom: 8px;
            right: 120px;
            font-size: 14px;
        }
        /* 切换上下页 */
        /* .changePage {
          width: fit-content;
          position: relative;
          top: 100px;
          margin: 0 auto;
        } */
    </style>
</head>

<body>
<%--悬浮显示框--%>
<div id="inform" class="inform" style="display: none" ></div>
<!-- 页面顶部 -->
<div class="top">
    <a href="mainForm">
        <div class="tlCorner" ></div>
    </a>

    <!-- 搜索框 -->
<%--    <div class="searchBar" id="Search">--%>
<%--        <form action="post">--%>
<%--            <input type="text" id="searchInput">--%>
<%--            <input type="submit" id="searchSubmit">--%>
<%--        </form>--%>
<%--    </div>--%>

    <!-- 搜索框 -->

    <div class="searchBar" id="Search">
        <form action="search" method="post">
            <input type="text" id="searchInput" name="keyword" size="14"  placeholder="搜索您喜欢的宠物">
            <button type="submit" id="searchSubmit"></button>
            <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <div id="auto"></div>
            <script type="text/javascript" src="js/searchProduct.js"></script>
        </form>
    </div>

    <div class="trCorner">
        <ul>
            <c:if test="${sessionScope.loginAccount == null}"><li><a href="signOnForm">用户登录</a></li></c:if>
            <c:if test="${sessionScope.loginAccount != null}"><li><a href="signOut">退出</a></li></c:if>
            <li><a href="cartForm">购物车</a></li>
            <li>店铺介绍</li>
            <li><a href="./help.html">帮助</a></li>
            <li>联系我们</li>
            <a id="userInfo" <c:if test="${sessionScope.loginAccount != null}">href="myAccountForm"</c:if>
            <c:if test="${sessionScope.loginAccount==null}" >href="signOnForm"</c:if>> </a>
        </ul>
    </div>
</div>

<!-- 主体 -->
<div class="mainBox">

    <div class="topBg"></div>

    <!-- 宠物目录 -->
    <div class="PetDisplay">

        <p id="pickMeUp">Pick Me Up</p>
        <div class="petCategory">
            <ul>
                <li id="cats" class="nav1" onmouseover="showInform(id);" onmouseout="hiddenInform(event)"></li>
                <li id="dogs" class="nav2" onmouseover="showInform(id);" onmouseout="hiddenInform(event)"></li>
                <li id="reptiles" class="nav3" onmouseover="showInform(id);" onmouseout="hiddenInform(event)"></li>
                <li id="birds" class="nav4" onmouseover="showInform(id);" onmouseout="hiddenInform(event)"></li>
                <li id="fish" class="nav5" onmouseover="showInform(id);" onmouseout="hiddenInform(event)"></li>
            </ul>
        </div>
    </div>

    <!-- 展示 -->
    <div class="AllPets">
        <ul class="item">
            <c:forEach var="product" items="${sessionScope.productList2}">
                <li id="toCats" class="petLi">
                        ${product.description}<br>
                        ${product.name}<br>
                    <a href="productForm?productId=${product.productId}" id="${product.productId}">
                        <button class="petDetBtn">详细</button>
                    </a>
                </li>
            </c:forEach>

            <c:forEach var="product" items="${sessionScope.productList}">
                <li id="toDogs" class="petLi">
                        ${product.description}<br>
                        ${product.name}<br>
                    <a href="productForm?productId=${product.productId}" id="${product.productId}">
                        <button class="petDetBtn">详细</button>
                    </a>
                </li>
            </c:forEach>

            <c:forEach var="product" items="${sessionScope.productList3}">
                <li id="toReps" class="petLi">
                        ${product.description}<br>
                        ${product.name}<br>
                    <a href="productForm?productId=${product.productId}" id="${product.productId}">
                        <button class="petDetBtn">详细</button>
                    </a>
                </li>
            </c:forEach>

            <c:forEach var="product" items="${sessionScope.productList4}">
                <li id="toBirds" class="petLi">
                        ${product.description}<br>
                        ${product.name}<br>
                    <a href="productForm?productId=${product.productId}" id="${product.productId}">
                        <button class="petDetBtn">详细</button>
                    </a>
                </li>
            </c:forEach>

            <c:forEach var="product" items="${sessionScope.productList5}">
                <li id="toFish" class="petLi">
                        ${product.description}<br>
                        ${product.name}<br>
                    <a href="productForm?productId=${product.productId}" id="${product.productId}">
                        <button class="petDetBtn">详细</button>
                    </a>
                </li>
            </c:forEach>

        </ul>
    </div>
    <%@ include file="../common/bottom.jsp"%>
</div>

<script src="jQuery.min.js"></script>

<!-- 漂浮 -->
<%--<script type="text/javascript" src="js/float.js"></script>--%>

</body>
<script type="text/javascript">

    // 导航栏滚动变色显示
    function scroll() {
        var top = $(".PetDisplay").offset().top;//获取宠物展示位置距顶部的高度
        var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
        if (scrollTop > top) {

            $('.top').addClass('change_color');
            $('.trCorner li').addClass('change_color');
            $('.trCorner li a').addClass('change_color');
            $('#auto').addClass('change_color2');

        } else if (scrollTop <= top - 50) {
            $('.top').removeClass('change_color');
            $('.trCorner li').removeClass('change_color');
            $('.trCorner li a').removeClass('change_color');
            $('#auto').removeClass('change_color2');

        }
    }

    $(window).on('scroll', function () {
        scroll()
    });

    //宠物目录
    $(document).ready(function () {
        $(".nav1").click(function () {
            $("html,body").animate({scrollTop: $('#toCats').offset().top-80}, 500);

        });

        $(".nav2").click(function () {
            $("html,body").animate({scrollTop: $('#toDogs').offset().top-80}, 500);

        });

        $(".nav3").click(function () {
            $("html,body").animate({scrollTop: $('#toReps').offset().top-80}, 500);

        });

        $(".nav4").click(function () {
            $("html,body").animate({scrollTop: $('#toBirds').offset().top-80}, 500);

        });

        $(".nav5").click(function () {
            $("html,body").animate({scrollTop: $('#toFish').offset().top-80}, 500);

        });
    })

    var name;
    var xmlHttpRequest;
    function createXMLHttpRequest()
    {
        xmlHttpRequest = new XMLHttpRequest();
    }

    showInform=function(categoryId)
    {
        console.log("showInform");
        name  = categoryId;
        var url = "categoryShowJs?categoryId="+categoryId;
        sendRequest(url);
    }

    function sendRequest(url)
    {
        console.log("sendRequest");
        createXMLHttpRequest();
        xmlHttpRequest.onreadystatechange = processInform;
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.send(null);

    }
    function processInform()
    {

        if (xmlHttpRequest.readyState ==4)
            if(xmlHttpRequest.status ==200)
            {
                var msg = xmlHttpRequest.responseText;
                var inform = document.getElementById('inform');
                inform.innerText = msg;
                inform.className = name;
                inform.style.display = 'table';

            }
    }

    $(document).mousemove(function(e){
        //event.pageX/event.pageY鼠标相对于文档的坐标位置。
        var x=e.pageX+20+'px';
        var y=e.pageY+60+'px';

        $("#inform").css({
            'left':x,
            'top':y
        })
    })

    function hiddenInform(event)
    {
        console.log("hiddenInform");
        var informDiv = document.getElementById('inform');
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft+informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop+informDiv.offsetHeight;
        if(x < divx1 || x > divx2 || y < divy1 || y> divy2)
        {
            document.getElementById('inform').style.display = 'none';
        }
    }

    //获取每个宠物距离页面顶部的高度，并保存到session中
    $(function (){
        var petItem=document.getElementsByClassName("petLi");
        for(var i=0;i<petItem.length;i++){
            var height;
            var id=petItem[i].querySelector("a").id;
            height=petItem[i].offsetTop+document.getElementsByClassName("AllPets")[0].offsetTop-90;
            console.log(height);
            petItem[i].querySelector("a").href="productForm?productId="+id+"&height="+height;
        }

        console.log(sessionStorage.getItem("back"));
        if(sessionStorage.getItem("back")==="true"){
            $("html,body").scroli
            $("html,body").animate({scrollTop: sessionStorage.getItem("to").toString()}, 0);
            sessionStorage.clear();
        }
    })



</script>

</html>

